<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="loginUserForm" :loginrules="loginrules" ref="loginUserForm" label-width="0px" class="demo-loginUserForm login-container">
      <h3 class="title">肇远数字虚拟人后台记录管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginUserForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginUserForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model="loginUserForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitLogin('loginUserForm')"></el-input>
          </el-form-item>
        </el-col> 
        <el-col :span="12" class="code-box">
          <img :src="loginUserForm.codeimg" alt="" class="codeimg" @click="getcode()">
        </el-col>
      </el-row>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;margin:0 auto">
        <el-button type="primary" style="width:40%; margin-right: 30px;" @click="submitLogin('loginUserForm')" :loading="logining">登录</el-button>
        <el-button style="width:40%;" @click="resetLogin">重置</el-button> 
        <el-link type="text" @click="modifypw">忘记密码？</el-link>   
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="passwordVisible" title="重置密码">
      <el-form
        :model="modifypwLogin"
        :loginrules="modifypwloginrules"
        ref="modifypwLogin"
        label-width="120px"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="modifypwLogin.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="modifypwLogin.confirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlemodifypwSubmit"
            >提交</el-button
          >
          <el-button @click="modifypwVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {
  name: 'userlogin',
  data() {
    return {
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      loginUserForm: {
        //username和password默认为空
        username: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      //loginrules前端验证
      loginrules: {
        username: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      passwordVisible: false,
      passwordForm: {
        newPassword: "",
        confirmPassword: "",
      },
      modifypwloginrules: {
        newPassword: [
          { 
            required: true,
             message: "请输入新密码",
              trigger: "blur" 
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 20个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, 
            message: "请再次输入新密码",
             trigger: "blur"
          },
          { 
            validator: this.validateConfirmPassword, 
            trigger: "blur" 
          },
        ],
      },
      modifypwLogin: {
        newPassword: "",
        confirmPassword: "",
      },
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '账号密码和验证码不能为空',
      type: 'success'
    })
    // 获取图形验证码
    this.getcode()
    // 获取存在本地的用户名密码
    this.getpw()
    
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取用户名密码
    getpw() {
      if (getCookie('login') != '' && getCookie('pwd') != '') {
        this.loginUserForm.username = getCookie('login')
        this.loginUserForm.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    //获取info列表
    submitLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
          // 测试通道，不为空直接登录
          setTimeout(() => {
            this.logining = false
            this.$store.commit('login', 'true')
            this.$router.push({ path: '/surgical/surgical' })
          }, 1000)
          // 正式环境
          login(this.loginUserForm).then(res => {
            if (res.success) {
              if (this.rememberpwd) {
                //保存帐号到cookie，有效期7天
                setCookie('login', this.loginUserForm.username, 7)
                //保存密码到cookie，有效期7天
                setCookie('pwd', this.loginUserForm.password, 7)
              } else {
                delCookie('logi')
                delCookie('pwd')
              }
              //如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data.token)
                // 缓存用户个人信息
                localStorage.setItem('userdata', JSON.stringify(res.data))
                this.$store.commit('login', 'true')
                this.$router.push({ path: '/surgical/surgical' })
              }, 1000)
            } else {
              this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          // 获取图形验证码
          this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })
    },
    //密码重置
    modifypw() {
      this.passwordVisible = true;
    },
    // 重置 
    resetLogin() {
      this.$refs.loginloginUserForm.resetFields();
    },
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url('https://img0.baidu.com/it/u=3991709530,2059376514&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>